<template>
	<view class="pendingpay">
		<view class="pendingpay-wrap">
			<view class="header">
				<view class="header_flex">
					<view class="type">
						<image class="pending-img" src="../../static/qb.png"></image>
						<view>{{orderitem.typename}}</view>
					</view>
					<view class="lasttime">剩余2小时00分自动关闭</view>
				</view>
				<view class="header_flex-right">
					<view class="phone">
						<image clsas="bgimage" style="width:15px;height:15px" src="../../static/phone.png"></image>
						<view @click="phonecall(orderitem.phone)">电话</view>
					</view>
					<view class="contact">
						<image clsas="bgimage" style="width:15px;height:15px" src="../../static/lx.png"></image>
						<view>联系对方</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="payprice"><text class="monenyicon">￥</text>{{userdetail.qian | moneyFilter}}</view>
				<view class="commflex">
					<view class="commcolor">单价</view>
					<view><text>￥</text>{{userdetail.danjia}}</view>
				</view>
				<view class="commflex">
					<view class="commcolor">数量</view>
					<view>{{userdetail.cbt}}</view>
				</view>
				<view class="warning">{{orderitem.tips}}</view>
				<view class="commflex">
					<view class="commcolor">买家账号</view>
					<view>{{user.account}}</view>
				</view>
				<view class="commflex">
					<view class="commcolor">买家实名</view>
					<view>{{user.uname}}</view>

				</view>
				<view class="commflex">
					<view class="commcolor">订单号</view>
					<view>{{orderitem.order_id}}</view>
				</view>
				<view class="commflex">
					<view class="commcolor">收款方式</view>
					<image v-show="orderitem.money_type == 2" style="width: 22px;height: 22px;" src="../../static/zfb.png"></image>
					<image v-show="orderitem.money_type == 1" style="width: 22px;height: 22px;" src="../../static/wx.png"></image>
				</view>
			</view>
		</view>
		<view class="btncell">
			<view class="cancleorder">申述</view>
			<view class="confirmorder">确认收款</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderitem: {},
				userdetail: {},
				user: {},
				type: 0,
				status: 0,
			}
		},
		onLoad(option) {
			this.userdetail = JSON.parse(option.item)
			this.type = option.type;
			this.status = option.status;
			this.loaddata()
		},
		methods: {
			showpic() {

			},
			phonecall(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile,
					success: function(res) {
						console.log(res, 'phonecall')
					}
				})
			},
			loaddata() {
				let that = this;
				console.log(this.status)
				uni.request({
					url: 'https://www.ggshop1688.com/api/transaction/out_in_detail',
					data: {
						status: parseFloat(this.status),
						type: this.type == 2 ? 1 : 2,
						id: this.userdetail.id
					},
					method: 'POST',
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(data => {
					if (data[1].data.status == 1) {
						console.log(data[1].data.data)
						that.orderitem = data[1].data.data.detail
						that.user = data[1].data.data.detail.payinfo
					}

				}).catch(err => {
					console.log(err)
				})
				// uni.request({
				// 	url: 'https://gua.qinmaoyi.cn/api/conduct/conductlist',
				// 	data: {
				// 		p: '1'
				// 	},
				// 	method: 'POST',
				// 	header: {
				// 		token: uni.getStorageSync('userInfo').token
				// 	},
				// }).then(data => {
				// 	this.cashlist = data[1].data.data.list
				// }).catch(err => {
				// 	console.log(err)
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pendingpay {
		.pendingpay-wrap {
			.header {
				display: flex;
				background-color: #ED5B25;
				position: relative;
				align-items: center;
				height: 140upx;
				padding-bottom: 20upx;

				.header_flex {
					padding-left: 30upx;

					.type {
						font-size: 42upx;
						color: #fff;
						display: flex;
						align-items: center;
						padding-bottom: 13upx;

						.pending-img {
							width: 45upx;
							height: 40upx;
							margin-right: 10upx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.lasttime {
						font-size: 24upx;
						color: #fff;
					}
				}

				.header_flex-right {
					position: absolute;
					right: 0;
					display: flex;
					text-align: center;

					.bgimage {
						width: 30upx;
						height: 30upx;
					}

					.phone {
						color: #fff;
						font-size: 20upx;
					}

					.contact {
						color: #fff;
						font-size: 20upx;
						padding: 0px 20upx;
					}
				}
			}

			.content {
				font-size: 30upx;
				padding: 30upx;

				.payprice {
					font-size: 46upx;
					color: #ED5B25;

					.monenyicon {
						font-size: 26upx;
					}
				}

				.warning {
					font-size: 24upx;
					color: #ED5B25;
					margin-top: 40upx;
					margin-bottom: 40upx;
				}

				.commflex {
					display: flex;
					justify-content: space-between;
					padding: 20upx 0upx;
				}

				.commcolor {
					color: #757575;
				}
			}


		}

		.btncell {
			display: flex;
			justify-content: space-around;

			.cancleorder {
				background-color: #F9DDCB;
				height: 70upx;
				font-size: 26upx;
				text-align: center;
				width: 100px;
				line-height: 70upx;
				border-radius: 10upx;
				width: 336upx;
			}

			.confirmorder {
				background-color: #999;
				border-radius: 10upx;
				height: 70upx;
				width: 336upx;
				font-size: 26upx;
				text-align: center;
				width: 336upx;
				color: #fff;
				line-height: 70upx;
			}
		}
	}
</style>
